<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Album</title>
<link href="css/common.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.dragsort-0.5.1.min.js"></script>
</head>
<body>
<div class="wrap clearfix">
  <div class="content">
    <div class="headerWrap">
      <div class="custom-avatar"><img src="images/avatar.png" width="32" height="32" alt="avatar"></div>
    </div>
    <div class="tab_content clearfix">
      <ul class="tab_menu">
        <li>
          <div class="nav-left nav-photos-of-you"></div>
          <div class="nav-right"><span class="nav-count">6</span><span class="nav-subtitle">Photos of you</span></div>
        </li>
        <li>
          <div class="nav-left nav-photos"></div>
          <div class="nav-right"><span class="nav-count">6</span><span class="nav-subtitle">Photos</span></div>
        </li>
        <li class="navactive">
          <div class="nav-left nav-album"></div>
          <div class="nav-right"><span class="nav-count">6</span><span class="nav-subtitle">Album</span></div>
        </li>
      </ul>
    </div>
    <div class="timeline_bg"></div>
    <div class="album_of_me clearfix">
      <ul id="list-album">
        <li>
          <div class="album-subset">1</div>
          <div class="photo-details"><a href="#">My web</a></div>
          <div class="photo-privacy">3 photos</div>
        </li>
        <li>
          <div class="album-subset">2</div>
          <div class="photo-details"><a href="#">My web</a></div>
          <div class="photo-privacy">3 photos</div>
        </li>
        <li>
          <div class="album-subset">3</div>
          <div class="photo-details"><a href="#">My web</a></div>
          <div class="photo-privacy">3 photos</div>
        </li>
        <li>
          <div class="album-subset">4</div>
          <div class="photo-details"><a href="#">My web</a></div>
          <div class="photo-privacy">3 photos</div>
        </li>
        <li>
          <div class="album-subset">5</div>
          <div class="photo-details"><a href="#">My web</a></div>
          <div class="photo-privacy">3 photos</div>
        </li>
      </ul>
      <input name="list1SortOrder" type="hidden">
      <script type="text/javascript">
		$("#list-album").dragsort({ dragSelector: "div", dragBetween: true, dragEnd: saveOrder, placeHolderTemplate: "<li class='placeHolder'><div></div></li>" });
		
		function saveOrder() {
			var data = $("#list-album li").map(function() { return $(this).children().html(); }).get();
			$("input[name=list1SortOrder]").val(data.join("|"));
		};
	</script> 
    </div>
    <div class="bottom-content"><img src="images/footer.png" width="772" height="68"></div>
  </div>
  <div class="side_ads"><img src="images/ads.png" width="244" height="559"></div>
</div>
</body>
</html>
